<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
         background-color: coral;
         border: 1px solid;
         padding: 50px;
    }
 </style>
</head>
<body>
    <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。</p>
    <button id="button">click me </button>
    <p id="demo"></p>
    <script>
        document.getElementById("button").addEventListener("click", displayDate);
        function displayDate(){
            document.getElementById("demo").innerHTML = Date();
        }
    </script>

<!-- 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
    在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。 -->
    <div id="div1">
        <p id="p1">冒泡，先内元素后外元素</p>
    </div><br>        
    <div id="div2">
        <p id="p2">捕获，先外元素后内元素</p>
    </div>
    <script>
        document.getElementById("p1").addEventListener("click",function(){
            alert("element p1!");
        },false);
        document.getElementById("div1").addEventListener("click", function(){
            alert("element div1!");
        }, false);

        document.getElementById("p2").addEventListener("click",function(){
            alert("p2");
        },true);
        document.getElementById("div2").addEventListener("click", function(){
            alert("div2");
        },true);
    </script>
</body>
</html>